<template>
  <div id="resourceManagement"></div>
</template>

<script>
import * as PIXI from 'pixi.js'
export default {
  name: 'as',
  mounted() {
    let _this = this
    this.$nextTick(() => {
      _this.initPixi()
    })
  },
  methods: {
    initPixi() {
      const options = {
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: 0x1099bb,
        resolution: window.devicePixelRatio || 1,
        antialias: true
      }
      // 创建应用
      const app = new PIXI.Application(options)
      // 将应用画布添加到DOM中
      document.querySelector('#resourceManagement').appendChild(app.view)

      // 添加资源
      // PIXI.Assets.add('arrow', require('../assets/textures/arrow.png'))
      // PIXI.Assets.add('dog', require('../assets/textures/dog.png'))
      // // 异步加载资源
      // const texturesPromise = PIXI.Assets.load(['arrow', 'dog'], (progress) => {
      //   console.log('加载完成...', progress)
      // })
      // texturesPromise.then((textures) => {
      //   // 创建容器
      //   const container = new PIXI.Container()

      //   // 创建精灵位置
      //   const sprite = new PIXI.Sprite(textures.arrow)
      //   // 精灵位置
      //   sprite.x = app.screen.width / 2
      //   sprite.y = app.screen.height / 2
      //   // 设置精灵锚点
      //   sprite.anchor.set(0.5)
      //   // 设置透明度
      //   sprite.alpha = 0.5
      //   // 设置缩放
      //   sprite.scale.set(0.5)
      //   // 设置旋转
      //   sprite.rotaion = 0.5
      //   // 设置混合模式
      //   sprite.blendMode = PIXI.BLEND_MODES.ADD
      //   // 设置交互
      //   sprite.interactive = true
      //   // 设置鼠标样式
      //   sprite.buttonMode = true
      //   // 设置鼠标事件
      //   sprite.on('click', () => {
      //     alert('点击')
      //   })
      //   // 容器添加arrow
      //   container.addChild(sprite)

      //   const dog = new PIXI.Sprite(textures.dog)
      //   dog.scale.set(0.5)
      //   // 容器添加dog
      //   container.addChild(dog)
      //   // 添加到画布
      //   app.stage.addChild(container)
      // })

      /* ******************************************** */
      // 添加场景1的资源文件
      PIXI.Assets.addBundle('scene1', {
        arrow: '/textures/arrow.png',
        dog: '/textures/dog.png'
      })
      const assets = PIXI.Assets.loadBundle('scene1', (progress) => {
        console.log('加载完成...', progress)
      })
      assets.then((textures) => {
        // 创建容器
        const container = new PIXI.Container()

        // 创建精灵位置
        const sprite = new PIXI.Sprite(textures.arrow)
        // 精灵位置
        sprite.x = app.screen.width / 2
        sprite.y = app.screen.height / 2
        // 设置精灵锚点
        sprite.anchor.set(0.5)
        // 设置透明度
        sprite.alpha = 0.5
        // 设置缩放
        sprite.scale.set(1)
        // 设置旋转
        sprite.rotaion = 0.5
        // 设置混合模式
        sprite.blendMode = PIXI.BLEND_MODES.ADD
        // 设置交互
        sprite.interactive = true
        // 设置鼠标样式
        sprite.buttonMode = true
        // 设置鼠标事件
        sprite.on('click', () => {
          alert('点击')
        })
        // 容器添加arrow
        container.addChild(sprite)

        const dog = new PIXI.Sprite(textures.dog)
        dog.scale.set(0.5)
        // 容器添加dog
        container.addChild(dog)
        // 添加到画布
        app.stage.addChild(container)
      })
    }
  }
}
</script>
<style>
#tag {
  width: 100%;
  height: 100%;
}
</style>
